<template>
  <div class="audituser">
    <div class="audituser_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <el-input
            style="width:250px;"
            placeholder="请输入手机号"
            suffix-icon="el-icon-search"
            v-model.number="searchipt"
            @change="iptbur"
          >
          </el-input>
          <div class="taber">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="待审核" name="1"> </el-tab-pane>
              <el-tab-pane label="已审核" name="2"> </el-tab-pane>
            </el-tabs>
          </div>
          <div>
            <div>
              <el-table
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                :cell-style="rowClass"
                :header-cell-style="headClass"
                ref="singleTable"
                @current-change="handleCurrentChange"
                highlight-current-row
              >
                <!-- fixed -->
                <el-table-column prop="id" label="id">
                  <template slot-scope="scope">
                    <div>{{ scope.row.id }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="team_img" label="团队头像">
                  <template slot-scope="scope">
                    <el-image
                      style="width:100px;height:100px"
                      fit
                      :src="scope.row.team_img"
                      lazy
                    >
                      <div slot="placeholder" class="image-slot">
                        <!-- 加载中<span class="dot">...</span> -->
                        <img
                          style="display:inline-block;width:100%;height:100%"
                          :src="require('@/assets/images/download.gif')"
                          alt=""
                          srcset=""
                        />
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号">
                  <template slot-scope="scope">
                    <div style="text-align:center">
                      {{ scope.row.phone }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="team_desc" label="团队介绍" width="130">
                  <template slot-scope="scope">
                    <div
                      style="max-height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;"
                    >
                      {{ scope.row.team_desc }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="QQ" label="QQ">
                  <template slot-scope="scope">
                    <div>{{ scope.row.qq }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="good_field" label="擅长领域" width="95">
                  <template slot-scope="scope">
                    <div
                      style="max-height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;"
                    >
                      {{ scope.row.good_field }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="账号状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status === 1">
                      <el-tag type="success">已通过</el-tag>
                    </span>
                    <span v-if="scope.row.status === 2">
                      <el-tag type="info">未审核</el-tag>
                    </span>
                    <span v-if="scope.row.status === 3">
                      <el-tag type="danger">已拒绝</el-tag>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="action" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      style="margin-left: 10px;"
                      @click.native.prevent="pass(scope.row)"
                      type="text"
                      size="small"
                      >审核用户
                    </el-button>
                    <el-button
                      @click.native.prevent="close(scope.row)"
                      type="text"
                      size="small"
                      >取消用户推广权限
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="width:100%;text-align:right">
                <!-- 分页器 -->
                <!-- @size-change="handleSizeChange" -->
                <!-- background -->
                <el-pagination
                  @current-change="handleCurrentChange2"
                  :current-page="currentPage"
                  :page-size="pagesize"
                  :pager-count="11"
                  layout="total, prev, pager, next, jumper"
                  :total="count"
                >
                  <!-- :page-sizes="[100, 200, 300, 400]" -->
                </el-pagination>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// import { getAdminGoods, doRejectGoods, doPassGoods } from "@/api/local/audit";
import { getAuditList, doRefuseUser, doPassUser } from "@/api/audit/audit";
export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  name: "audituser",
  data() {
    return {
      pagesize: 30,
      currentPage: 1,
      count: 0,
      loading: false,
      activeName: "1",
      searchipt: "",
      type: 1,
      tableData: [
        // {
        //   id: 5,
        //   status: 1, //1=待审核 2=已通过 3 已拒绝
        //   phone: "17339627799", // 手机
        //   team_desc: "454545", //团队描述
        //   team_img: "", //团队头像
        //   qq: "1545", // qq
        //   good_field: "54564545" //擅长领域
        // }
      ],
      tableData2: []
    };
  },

  computed: {},
  created() {
    this.getAuditList(1, 30, this.type, "");
    // this.userGetGoods();
  },
  mounted() {},
  methods: {
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAuditList(this.currentPage, 30, this.searchipt, "");
    },
    iptbur() {
      this.getAuditList(1, 30, this.type, this.searchipt);
    },
    getAuditList(page, pagesize, type, phone) {
      this.loading = true;
      getAuditList({
        page: page,
        pagesize: pagesize,
        phone: phone === "" ? undefined : phone,
        type: type === "" ? undefined : type
      })
        .then(res => {
          this.loading = false;
          console.log("审核用户列表", res.data);
          this.count = res.data.count;
          this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 审核通过
    pass(row) {
      console.log("row", row);
      doPassUser({
        id: row.id
      })
        .then(res => {
          console.log(res);
          this.$message.success("审核通过");
          this.getAuditList(1, 30, this.type, "");
        })
        .catch(err => {
          console.log(err);
        });
    },
    close(row) {
      console.log(row);
      doRefuseUser({
        id: row.id
      })
        .then(res => {
          console.log(res);
          this.$message({
            type: "success",
            message: "已拒绝"
          });
          this.getAuditList(1, 30, this.type, "");
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 导航栏切换
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index === "0") {
        this.type = 1;
        console.log(this.type);
        this.getAuditList(1, 30, 1, "");
      }
      if (tab.index === "1") {
        this.type = 2;
        console.log(this.type);

        this.getAuditList(1, 30, 2, "");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.audituser {
  // width: 970px;
  box-sizing: border-box;
  // .audituser_main::v-deep {
  //   // width: 970px;
  // }
}
</style>
